<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
        <link rel="stylesheet" href="css/shop.css">
        <style>
            @font-face {
                font-family: 'cm';
                src: url("font/Begilas.otf");
            }

            @font-face {
                font-family: 'huayuan';
                src: url("font/花园肉丸.ttf");
            }

            #BackLink {
                margin: 0 auto;
                position: absolute;
                left: 50%;
                top: 94%;
                transform: translate(-50%, -50%);
            }

            .refreshButton {
                width: 20px;
                height: 20px;
                margin-left: 20px;
                background-image: url(img/refresh.png);
                background-repeat: no-repeat;
                background-size: contain;
                background-color: inherit;
                border: none;
            }

            td input {
                width: 30px;
                text-align: center;
            }

        </style>
        <div th:include="~{common/top}"></div>

        <div class="display">
            <h2>Shopping Cart</h2>
            <div id="Cart">
                <form action="updateCart" method="post">
                    <table>
                        <tr>
                            <th><b>Name</b></th>
                            <th><b>Description</b></th>
                            <th><b>Quantity</b></th>
                            <th><b>List Price</b></th>
                            <th><b>Total Cost</b></th>
                            <th>&nbsp;</th>
                        </tr>

                        <tr th:if="${session.cart.getNumberOfItems() == 0}">
                            <td colspan="8"><b>Your cart is empty.</b></td>
                        </tr>

                        <tr th:each="cartItem:${session.cart.cartItems}">
                            <td th:text="${cartItem.item.productId}"></td>

                            <td th:text="${cartItem.item.attribute1}"></td>

                            <td>
                                <input type="text" th:name="${cartItem.item.itemId}" th:value="${cartItem.getQuantity()}" class="quantityNum">
                            </td>

                            <td>
                                <fmt:formatNumber th:text="${cartItem.item.listPrice}" pattern="$#,##0.00" />
                            </td>
                            <td>
                                <p th:id="${cartItem.item.itemId}" style="display: inline-block;">
                                    <fmt:formatNumber th:text="${cartItem.total}" pattern="$#,##0.00" />
                                </p>
                            </td>
                            <td><a th:href="@{removeCartItem(workingItemId=${cartItem.item.itemId})}" class="Button">Remove</a>
                            </td>
                        </tr>

                        <tr>
                            <td colspan="8">
                                Sub Total: <P id="subtotal" style="display: inline-block;">
                                    <fmt:formatNumber th:text="${session.cart.subTotal}" pattern="$#,##0.00" />
                                </P>
                                <button type="submit" class="refreshButton"></button>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>

                <div id="draw-border" th:if="${session.cart.getNumberOfItems() > 0}">
                    <a href="newOrderForm" class="ButtonNext"
                        style="font-family: huayuan;position: relative;left: 160px;">
                        <button>提交订单</button>
                    </a>
                </div>


            <div id="Separator">&nbsp;</div>

            <div id="BackLink">
                <a th:if="${session.product!=null}" th:href="@{/productForm(productId=${session.product.getProductId()})}">
                    <button><span>返回</span></button>
                </a>
                <a th:if="${session.product==null}" href="mainForm">
                    <button><span>返回</span></button>
                </a>
            </div>
        </div>

        <div id="MyList">
            <th:if test="${session.loginAccount.listOption}">
<!--                <div th:block th:include="~{cart/includeMyList}"></div>-->
            </th:if>
        </div>

        <script src="jQuery.min.js"></script>
        <script>
            $(function () {
                $('.quantityNum').on('blur', function () {
                    var num = $(this).val();
                    var id = this.name;
                    console.log(num);

                    $.ajax({
                        type: "GET", url: "changeCart",
                        data: {
                            id: id,
                            quantity: num,
                        },
                        success: function (data) {
                            console.log(data);
                            var json = eval("(" + data + ")");
                            var itemTotal = json.data1;
                            var subTotal = json.data2;
                            $('#' + id).html("$" + itemTotal);
                            $('#subtotal').html("$" + subTotal);
                        }
                    })
                })
            })
        </script>